<template>
  <Transition name="slide-left">
    <div v-if="showMomentForm" class="moment-form">
      <PageHead
        title="添加朋友圈"
        :show-more="false"
        @back="showMomentForm = false"
      ></PageHead>

      <section class="pl-8">
        <!--  -->
        <div class="hr">所属信息</div>
        <form ref="formRef" class="flex flex-col gr-2" @submit="confirm">
          <List title="谁发布的？">
            <select v-model="form.from" required>
              <option
                v-for="(item, key) in objectOptions"
                :key="key"
                :value="item.value"
                >{{ item.label }}
              </option>
            </select>
          </List>

          <template v-if="form.from === 2">
            <List title="用户名" :show-arrow="false">
              <input
                v-model="form.username"
                required
                type="text"
                placeholder="请输入用户名"
                class="text-right"
              />
            </List>
            <List title="头像" :show-arrow="false"> 上传 </List>
          </template>
          <div class="hr">发布内容设置</div>
          <List title="需要发布的图片" @click="uploadImage">
            <div class="text-999 flex align-center"
              >上传图片
              <span v-if="form.imageList.length > 0">
                【{{ form.imageList.length }}】
              </span>
            </div>
          </List>

          <div
            v-if="form.imageList.length > 0"
            class="image-list pl-12 pr-16 mt-12"
          >
            <div class="text-999 mb-8 flex justify-between">
              <div>图片预览</div>
              <div class="text-blue" @click="clearImage">清空</div>
            </div>
            <ul class="image-list">
              <li v-for="(item, key) in form.imageList" :key="key" class="flex">
                <img :src="item" class="w-100" />
              </li>
            </ul>
          </div>
          <List title="发布的时间" :show-arrow="false">
            <input
              v-model="form.createTime"
              required
              type="text"
              placeholder="5分钟前"
              class="text-right"
            />
          </List>

          <!--  -->
          <div class="hr mb-8">互动配置</div>
          <div class="pr-16 pl-12">
            <div class="text-nowrap mb-8">点赞名单列表</div>
            <textarea
              v-model="form.reviewer"
              placeholder="输入姓名，用逗号隔开：张三，李四,大批量数据建议用chatgpt生成"
            ></textarea>
          </div>
          <div class="pr-16 pl-12">
            <div class="mb-8">内容</div>
            <textarea
              v-model="form.content"
              required
              :maxlength="140"
              placeholder="请输入内容"
              class="w-100"
            ></textarea>
            <div>
              <span class="text-10 text-999">
                {{ form.content.length }}/140
              </span>
            </div>
          </div>
          <div class="comfirm text-center">
            <button>确定</button>
          </div>
        </form>
      </section>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import List from '@/views/components/list/List.vue';
  import { ref } from 'vue';
  import { IMoment } from '@/store/user/types';
  import { showLoading } from '@/views/components/loading/loading';
  import { getAvatar, getUserStore } from '@/store/user/utils';
  import { nanoid } from 'nanoid';
  import { toBase64, useUploadFile } from '@/utils/file';
  import { notify } from '@/views/components/notify/notify';
  import { showMomentForm } from './monent-form';

  const formRef = ref();

  const objectOptions = [
    {
      label: '自己',
      value: 1,
    },
    {
      label: '别人',
      value: 2,
    },
  ];

  const formObject: IMoment = {
    id: '',
    content: '',
    createTime: '',
    type: 1,
    status: '',
    likeCount: 0,
    username: '',
    reviewer: '',
    image: '',
    commentList: [],
    from: 1,
    avatar: '',
    imageList: [],
  };

  const form = ref<IMoment>({
    ...formObject,
  });
  const clearImage = () => {
    form.value.imageList = [];
  };
  const confirm = () => {
    const e = window.event as MouseEvent;

    const formEl = formRef.value as HTMLFormElement;
    e.preventDefault();
    const store = getUserStore();
    if (formEl.checkValidity()) {
      if (form.value.from === 1) {
        form.value.username = store.master.username;
        form.value.avatar = getAvatar();
      }
      showLoading(
        {
          show: true,
          type: 'loading',
        },
        () => {
          showMomentForm.value = false;
        }
      );
      form.value.id = nanoid();
      store.moments.unshift(form.value);
      form.value = {
        ...formObject,
      };
    }
  };
  const uploadImage = async () => {
    const files = await useUploadFile({
      accept: 'image/*',
      muitiple: true,
    });
    if (files.length === 0) return;
    if (files.length >= 9) {
      notify({
        title: '提示',
        content: '超过9张，仅上传前面的图片',
        type: 'warning',
        show: true,
      });
    }
    clearImage();
    const asyncArr = Array.from(files).map(async (file, i) => {
      if (i < 9) {
        const base64 = await toBase64(file);
        form.value.imageList.unshift(base64);
      }

      return file;
    });
    await Promise.all(asyncArr);
  };
</script>

<style scoped lang="scss">
  @import './style';
</style>
